<template>
  <div class="match_tab">
    <div
      class="tabs_item"
      v-for="(item, index) in tabs"
      :class="homeState.order.activetype == item.value ? 'active_tabs_item' : ''"
      @click="homeStore.changeordertype(item.value)"
      :key="index"
    >
    <template v-if="item.value == 2 && homeState.order.data.error_order_place_task_objs != undefined">
      <el-badge :value="homeState.order.data.error_order_place_task_objs.length" :show-zero="false" :offset="[8, 5]">
        <div class="title AlibabaPuHuiTi_2_55_">{{ item.label }}</div>
      </el-badge>
      
    </template>
    <template v-else>
      <div class="title AlibabaPuHuiTi_2_55_">{{ item.label }}</div>
    </template>
      
    </div>
  </div>
</template>

<script setup>
const languageJson = inject('languageJson')
const languageType = inject('languageType')
const { homeStore, homeState } = inject('HomeStore')
const tabs = ref([
  {
    value: 0,
    label: languageJson.value.home.latelyOrder,
  },
  {
    value: 1,
    label: languageJson.value.home.liveOrder,
  },
  {
    value: 2,
    label: languageJson.value.home.errorOrder,
  },
])
</script>

<style lang="scss" scoped>
.match_tab {
  width: 100%;
  height: 36px;
  padding: 8px 12px 0 12px;
  display: flex;
}

.tabs_item {
  display: flex;
  align-items: center;
  margin-right: 16px;
  cursor: pointer;
  font-size: 16px;
  color: #666;
  border-bottom: 2px solid #fff;
  padding-bottom: 2px;
}
.active_tabs_item {
  font-size: 16px;
  font-weight: bold;
  color: #3711d8;
  border-bottom: 2px solid #3711d8;
}
.num {
  font-weight: bold;
  margin-left: 4px;
  top: -4px;
  line-height: 0px;
}
</style>